<template>
  <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" border>
    <el-table-column v-if="isShowSelection" type="selection" width="55">
    </el-table-column>

    <template v-for="(item, index) in tableColumn">

      <el-table-column :key="'t_' + index" v-if="item.slotname" :label="item.label" :width="item.width">
        <template slot-scope="scope">
          <div v-if="item.slotname == 'title'">
            <span class="active">{{ scope.row.title }}</span>
          </div>
          <div v-if="item.slotname == 'picture'">
            <img style="width: 100px" :src="`${uploadBaseUrl}${scope.row.picture}`" alt="" />
          </div>
          <div v-if="item.slotname == 'status'">
            <span 
              class="status-link"
              @click="$emit('status-click', scope.row)">
              {{ scope.row.statename }}
            </span>
          </div>
          <div v-if="item.slotname == 'state'">
            <el-switch 
              v-model="scope.row.state" 
              :active-value="1" 
              :inactive-value="2" 
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleStateChange(scope.row, $event)"
              :disabled="!isStateEditable(scope.row)">
            </el-switch>
            <span style="margin-left: 10px">{{ scope.row.state == 1 ? "开启" : "关闭" }}</span>
          </div>

          <div v-if="item.slotname == 'addtime'">
            {{ scope.row.addtime.substr(0, 19) }}
          </div>

          <div v-if="item.slotname == 'options'">
            <slot :name="item.slotname" :row="scope.row"></slot>
          </div>

          <div v-if="item.slotname == 'logo'">
            <img style="width: 80px; height: 80px; object-fit: cover;" :src="getFullImageUrl(scope.row[item.prop])" v-if="scope.row[item.prop]"/>
          </div>
          <div v-if="item.slotname == 'photo'">
            <img style="width: 100px" :src="scope.row.photo" alt="" v-if="scope.row.photo && scope.row.photo.startsWith('http')"/>
            <img style="width: 100px" :src="`${uploadBaseUrl}${scope.row.photo}`" alt="" v-else/>
          </div>
          <div v-if="item.slotname == 'images'">
            <template v-if="scope.row.images && scope.row.images.length > 0">
              <el-image
                v-for="(image, imgIndex) in scope.row.images.slice(0, 3)"
                :key="imgIndex"
                :src="getFullImageUrl(image.url)"
                :preview-src-list="scope.row.images.map(img => getFullImageUrl(img.url))"
                style="width: 80px; height: 80px; margin: 2px;"
                fit="cover"
                :preview-teleported="true">
              </el-image>
              <div v-if="scope.row.images.length > 3" style="font-size: 12px; color: #666;">
                共 {{ scope.row.images.length }} 张
              </div>
            </template>
            <span v-else>无图片</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-else :key="'k_' + index" :prop="item.prop" :label="item.label" :width="item.width"
        :formatter="item.formatter">
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  name: "BaseTable",
  props: {
    tableColumn: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    isShowSelection: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      multipleSelection: [],
      uploadBaseUrl: process.env.VUE_APP_UPLOAD_BASE_URL
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit('selection-change', this.multipleSelection);
    },
    getFullImageUrl(url) {
      if (!url) return '';
      if (url.startsWith('http')) return url;
      return `${this.uploadBaseUrl}${url}`;
    },
    handleStateChange(row, value) {
      this.$emit('state-change', { row, value });
    },
    isStateEditable() {
      // 默认所有状态都可编辑，如果有特殊规则可以在这里添加
      return true;
    }
  }
};
</script>
<style>
.active {
  color:#2198ff;
}

.status-link {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}

.status-link:hover {
  color: #66b1ff;
}
</style>